<template>
	<div class="app-container" style="padding-top: 50px;">
		<el-form :model="form" label-width="110px" style='width: 80%;margin-left: 30px;' :rules="rules" ref="dataForm">
				<el-row>
					<el-col :span="10">
						<el-form-item label="企业名称" prop="companyId">
							<el-select 
								v-model="form.companyId" 
								placeholder="请选择" 
								>
								<el-option v-for="item in companyOptions" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="10">
						<el-form-item label="产品名称" prop="productName">
							<el-input v-model="form.productName" class="input-width"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10">
						<el-form-item label="原价" prop="orderAmount">
							<el-input v-model="form.orderAmount" class="input-width"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="10">
						<el-form-item label="应付金额">
							<el-input v-model="form.amount" class="input-width"></el-input>
						</el-form-item>
					</el-col>
					
					
				</el-row>
				<el-row>
					<el-col :span="10">
						<el-form-item label="类型" prop="type">
							<el-radio v-model="form.type" label="1">新购</el-radio>
  							<el-radio v-model="form.type" label="2">续费</el-radio>
						</el-form-item>
					</el-col>
					<el-col :span="10">
						<el-form-item label="备注">
							<el-input v-model="form.description" class="input-width"></el-input>
						</el-form-item>
					</el-col>
					
					
				</el-row>
				

				
			</el-form>
			<div style="padding:20px 0 0 80px;">
				<el-button type="primary" @click="created">创建</el-button>
				<el-button @click="cancel">取消</el-button>	
			</div>
			
	</div>
</template>

<script>
	import { saveOrder,productList } from '@/api/order'
	import { getCompany,baseUrl } from '@/utils/index'
	export default {
		data() {
			return {
				companyOptions:[],
				form:{
					companyId:"",
					productName:"",
					orderAmount:"",
					amount:"",
					type:"1", /*1 新购 2续费*/
					description:""
					
				},
				rules: {
					companyId: [{
						required: true,
						message: '请选择公司',
					}],
					productName: [{
						required: true,
						message: '请填写产品',
					}],
					orderAmount: [{
						required: true,
						message: '请输入原价',
						trigger: 'blur'
					}],
					
				},
			}
		},
		created(){
			this.getCompany();
		},
		methods:{
			getCompany(){
				getCompany().then((res)=>{
					res.entity.forEach((item)=>{
						this.companyOptions.push({value: item.id,label: item.name})
					});
				})
			},
			
			saveOrder(data){
				saveOrder(data).then((res)=>{
					this.$notify({
						title: '成功',
						message: '创建成功',
						type: 'success',
						duration: 2000
					});
				})
			},
			created(){
				let data = this.form;
				 this.$refs.dataForm.validate(valid => {
				 	if(valid) {
				 		this.saveOrder(data);
				 	}
				 })
			},
			cancel(){
				this.$router.push({
					path:"/order/list"
				})
			},
			
		}
	}
</script>

<style scoped>
	.input-width{
		width: 200px;
	}
</style>